﻿@model RH.Web.ViewModels.CompanyViewModel
@using RH.Web.Utility;
@using RH.Common.Extensions
@using RH.Web.ViewModels
@{
    Layout = "~/Views/Shared/_PopupLayout.cshtml";
    ViewBag.Title = Html.GetPageTitle("Company Logo");
    int _CompanyID = Model == null ? 0 : Model.ID; //ViewBag.CompanyID;
    String _TempUploadedImageUrl = ViewBag.CropBoxImageUrl;
}
<div class="page-heading" style="padding-top:0px; padding-left:0px; margin-bottom:0px;">
    <h1>Upload Company Logo</h1>
    <div>
        At first upload your company's logo, then use BdMarket24.com's Image Cropper tool to resize and select the exact area of your logo. 
    </div>
</div>

<div>
    @if (Model == null)
    {
        @Html.ErrorMessageBox("Sorry! Requested Company does not exist.")
    }
    else
    {    
        <table cellpadding="0" cellspacing="0" style="border-collapse:collapse; width:953px;">
            <colgroup>
                <col style="width:205px;" />
                <col style="width:543px;"/>
                <col style="width:205px;" />
            </colgroup>
            <tr>
                @*Left Column*@
                <td class="border-right" style="vertical-align:top; padding:5px 5px 0px 0px;">
                    <div id="divThumbContainer">                    
                        <div id="divThumbLogo" class="company-logo" style="display:@(Model.LogoFile.IsNullOrEmpty() ? "none" : "block");">
                            <a href="javascript:void(0);" onclick="ConformDeleteDialog(@Model.ID, this);" title="Click to Delete this Logo.">
                                <img id="imgCompanyLogo" src="@ImageManager.GetCompanyLogoUrl(Model.LogoFile, Model.ID)" alt="@Model.Name Logo" title="@Model.Name Logo" />                                
                            </a>
                        </div>                    
                    </div>
                    <div id="divPosition"></div>
                </td>
                @*Middle Column*@
                <td class="border-right" style="vertical-align:top;  padding:5px 5px 0px 5px;">
                    <div style="min-height:400px;">
                    <form id="frmCompanyLogo" action="@Url.Action("List")" method="post" enctype="multipart/form-data">            
                        <div>
                            <table cellpadding="3" cellspacing="0" style="width:100%; border-collapse:collapse;">
                                <tr id="trUploadControls" @{if (!_TempUploadedImageUrl.IsNullOrEmpty()) { <text> style="display:none;"</text>}}>
                                    <td style="width:160px;">Select an Image to Upload</td>
                                    <td><input id="fileCompanyLogo" type="file" name="companyLogo" onchange="ValidateUpload();" /></td>
                                    @*<td><input type="submit" value="Upload" onclick="return ValidateUpload();" /></td>*@
                                </tr>
                            </table>
                            @if (ViewData[AppConstants.ViewDataKeys.IMAGE_UPLOAD_ERROR] != null)
                            {
                                @Html.ErrorMessageBox(ViewData[AppConstants.ViewDataKeys.IMAGE_UPLOAD_ERROR] as String)    
                            }
                            <input type="hidden" name="hdnWidthHeight" id="hdnWidthHeight" value="@ViewBag.WidthHeight" />
                            <input type="hidden" name="companyID" id="companyID" value="@_CompanyID" />
                            <input id="hdnCoordinates" type="hidden" value="" />
                            @*<input id="hdnProductImageID" name="productImageID" type="hidden" value="@_ProductImageID" />*@
                            <input id="hdnOriginalFileName" name="hdnOriginalFileName" type="hidden" value="@ViewData[AppConstants.ViewDataKeys.ORIGINAL_FILE_NAME]" />
                        </div>
                        @*<img id="imgjCrop" src="/Temp/Hydrangeas.jpg" title="" alt="" />*@
                        <div class="cropbox">
                            <div id="divCropBoxContainer" class="cropbox">                    
                                <img id="imgCropBox" src="@_TempUploadedImageUrl" alt="" @{if (_TempUploadedImageUrl.IsNullOrEmpty()){<text>style="display:none;"</text>}}/>
                            </div>
                            @if (!_TempUploadedImageUrl.IsNullOrEmpty()){
                            <div id="divButtons" style="margin-top:5px;">
                                <input id="btnSave" type="button" value="Save" onclick="CropAndSaveImage();" />
                                <input id="btnCancel" type="button" value="Cancel" onclick="CancelImageCrop();" />
                            </div>
                            }
                        </div>
                    </form>
                    </div>                 
                </td>
                @*Right Column*@
                <td style="vertical-align:top; text-align:right;  padding:5px 0px 0px 5px;">
                    <div style="overflow: hidden; width:200px; height:63px;">
                        <img id="imgPreview" class="jcrop-preview" src="@ViewBag.CropBoxImageUrl" alt="" />
                    </div>
                </td>
            </tr>
        </table>
        
        <div id="dialog" style="display:none;"></div>
        <div id="deleteDialog" style="display:none;">Do you really want to Delete this Logo?</div>
        
        <script language="Javascript" type="text/javascript">
            var _ProductID = @_CompanyID;        
            $(document).ready(function(){
                BindImageCropper();
                $('#dialog').dialog({
                    autoOpen: false, width: 400,
                    buttons: {
                        "Ok": function () { $(this).dialog("close"); }
                    }
                });
                $('#deleteDialog').dialog({
                    autoOpen: false, width: 400,
                    buttons: {
                        'Ok': function () { ShowLoadingAnimation(false); DeleteImage(); $(this).dialog("close"); },
                        'Cancel' : function() { $(this).dialog("close"); }
                    }
                });
                parent.ChildHideLoading();                
            });
            function SetCoordinates(c) {        
                $('#hdnCoordinates').val(c.x + ',' + c.y + ',' + c.w + ',' + c.h );
            }
            var _jCropApi;
            var _ActualWidth = 0;
            var _ActualHeight = 0;
            function BindImageCropper() {
                var widthAndHeight = $('#hdnWidthHeight').val();
                if(widthAndHeight.length > 0)
                {
                    if (_jCropApi) _jCropApi.destroy();
                    $('#imgCropBox').Jcrop({
                        setSelect: [0, 0, 200, 63],
                        onChange: ShowPreview,
                        onSelect: ShowPreview,
                        aspectRatio: @ConfigReader.CompanyLogoAspectRatio //3.175
                    }, function () {
                        _ActualWidth = widthAndHeight.split(',')[0];
                        _ActualHeight = widthAndHeight.split(',')[1];
                        _jCropApi = this;
                        parent.AdjustiFrameHeight($(document).height());
                    });                    
                }
                else
                    parent.AdjustiFrameHeight($(document).height());
            }  

            function ShowPreview(coords) {
                SetCoordinates(coords);
                if (parseInt(coords.w) > 0 && _ActualWidth > 0 && _ActualHeight > 0) {
                    var rx = 200 / coords.w;
                    var ry = 63 / coords.h;

                    $('#imgPreview').css({
                        width: Math.round(rx * _ActualWidth) + 'px',
                        height: Math.round(ry * _ActualHeight) + 'px',                        
                        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                        marginTop: '-' + Math.round(ry * coords.y) + 'px'
                    });
                }
            }
            function CropAndSaveImage() {             
                var coordinates =  $('#hdnCoordinates').val();
                if(coordinates.length > 0)
                {
                    var url= '@Url.Action("CropAndSaveImage", "CompanyLogo", new { area = AppConstants.Area.PRIVATE })';
                    var data = { ID: $('#companyID').val(), LogoFile: $('#imgCropBox').attr('src'), CropProperty: coordinates, OriginalFileName: $('#hdnOriginalFileName').val() };
                    Ajax(url, data, CropAndSaveImage_Success);
                }
                else
                   $('#dialog').html('Please Select and Upload an Image first to Set it as Company Logo.').dialog('open'); //alert("Please Select and Upload an Image first to Set it as a Product Image."); 
            }

            function CropAndSaveImage_Success(obj){
                var image = eval(obj);
                $('#divCropBoxContainer').hide();
                $('#imgPreview').hide();
                $('#btnSave').attr('disabled', true);   
                $('#divThumbLogo').show();
                $('#trUploadControls').slideDown('slow');
                $('#divButtons').fadeOut('slow');
                $('#imgCompanyLogo').attr('src', image.LogoFile);
                parent.SetLogo(image.LogoFile);
                parent.AdjustiFrameHeight('iframeImageList');
            }

            var _AnchorToDelete = null;
            var _ImageIdToDelete = 0;
            function ConformDeleteDialog(companyID, anchorElement) {
                _ImageIdToDelete = companyID;
                _AnchorToDelete = anchorElement;
                $('#deleteDialog').dialog('open');
            }
            function DeleteImage()
            {
                var url = '@Url.Action("DeleteCompanyLogo", "CompanyLogo", new { area = AppConstants.Area.PRIVATE })';
                var data = 'companyID=' + _ImageIdToDelete;
                Ajax(url, data, Delete_Success);
            }
            function Delete_Success(isDeleted){
                if(isDeleted){
                    $('#divThumbLogo').hide();//$(_AnchorToDelete).parent().remove();                    
                    $('#dialog').html('Company Logo Deleted Successfully.').dialog('open');//alert("Product Image Deleted Successfully.");
                }
                else
                    $('#dialog').html('Sorry! Requested Image was not found for Delete.').dialog('open');//alert("Sorry! Requested Image was not found for Delete.");
                HideLoadingAnimation();
            }
            function ValidateUpload() {
                if($('#fileCompanyLogo').val().length > 0){
                    ShowLoadingAnimation(false);
                    $('#frmCompanyLogo').submit();
                }
                else
                    return false;
                return true;
            }
            function CancelImageCrop()
            {
                $('#divCropBoxContainer').slideUp('slow');
                $('#trUploadControls').slideDown('slow');                
                $('#divButtons').fadeOut('slow');
                $('#imgPreview').fadeOut('slow');
                $('#hdnCoordinates').val('');
            }
        </script>
    }
</div>



